<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票列表</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<app>
		<div id="vote" class="wrap">
		<h2>投票列表</h2>
		<ul class="list">
			<li v-for=" v,i in votes " :class="{odd : i % 2 == 0}"
				style="position: relative">
				<h4>
					<a :href="'view.html?id='+v.id">{{v.vname}}</a>
				</h4>
				<div class="join">
					<a :href="'vote.html?id='+v.id">我要参与</a>
				</div>
				<p class="info">共有 {{v.items.length}} 个选项，
					已有 {{v.users}} 个网友参与了投票。</p>
				<h1 v-if="v.voted" style="color: red;
							position: absolute;
							top: 10px;
							right: 200px;
							transform: rotate(-45deg);">已投</h1>
			</li>
		</ul>
	</div>
	</app>
</div>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			votes:[]
		},
		created(){
			axios.get("QueryVoteServlet").then(res=>this.votes=res.data);
		},
		methods:{
			getAll(vote){
				let all = 0;
				vote.items.forEach(item=>all+=item.nums);
				return all;
			}
		}
	})
</script>
</body>
</html>
